<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>新用户注册</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .bj {
      background-image: url(./img/zhuce.jpg);
      width: 100%;
      min-width: 1024px;
      height: 750px;
      /* overflow: hidden; */
    }
    .logo{
      text-align: right;
    }
    .logo img {
      width: 200px;
      margin: 20px 100px 50px 0;
    }
    .center{
      overflow: hidden;
    }
    .center .table{
      width: 300px;
      background-color: rgba(0,0,0,0.3);
      /* border: 2px solid black; */
      margin: 0 auto;
      border-radius: 5px;
      padding: 20px;
      color: #fff;
      position: absolute;
      right: 100px;
    }
    .table input{
    width: 190px;
    height: 30px;
    margin-bottom: 20px;
    margin-top: 20px;
    border-radius: 3px;
    border:0;
    }
    .table button{
      width: 100%;
      height: 40px;
      background-color:#0aa1ed ;
      color: #fff;
      font-size: 20px;
      border: 0;
      border-radius: 5px;
      margin-bottom: 20px;
    }
    p{
      text-align: right;
    }
    p a {
      color: #fff;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div class="bj">
    <div class="center">
      <p class="logo"> <a href="index.html"><img src="./img/logo.png" alt=""></a></p>
      <div class="table">
        <h1>用户注册页面</h1>
        <hr>
        <label>*用户名 ：</label>
        <input type="text" placeholder="用户名字" id="username"> <br>
        <label>*手机号码:</label>
        <input type="text" placeholder="手机号码" id="uphone">
        <br>
        <label>*密 &#x3000;码：</label>
        <input type="text" placeholder="请输入密码" id="upassword">
        <br>
        <button id="btn">注册</button><br>
        <p><a href="users.html">已有用户登录</a></p>

      </div>
    </div>
  </div>
  <script>
    //1.获取元素
    var username = document.getElementById('username');
    var uphone = document.getElementById('uphone');
    var upassword = document.getElementById('upassword');
    var btn = document.getElementById('btn');

    //2.写ajax函数
    function ajax(a, b, c) {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            var result = JSON.parse(xhr.responseText);
            console.log(result)
            //直接弹出后台返回的msg给用户
            alert(result.msg);
          } else {
            console.log('返回数据错误');
          }
        }
      }
      xhr.open('POST', '/user/register', true);
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.send(`username=${a}&uphone=${b}&upassword=${c}`);
    }
    //3.获取用户输入信息，调用ajax
    btn.onclick = function () {
      var usernameval = username.value.trim();
      var uphoneval = uphone.value.trim();
      var upasswordval = upassword.value.trim();
      if(usernameval!=""&& uphoneval!="" &&upasswordval!=""){
        ajax(usernameval, uphoneval, upasswordval);
      }else{
        alert("输入信息不可为空");
      }
      
    }
  </script>
</body>

</html>